<template>
    <view style="padding-bottom: 200rpx">
        <!-- <u-navbar title="商品管理" :is-back="false"></u-navbar> -->
        <view class="tabs u-flex-center u-row-between">
            <!-- #ifndef H5  -->
            <!-- <u-navbar title="订单管理"></u-navbar> -->
            <!-- #endif -->
            <view style="width: 100%">
                <u-tabs
                    ref="tabs"
                    :current="current"
                    :list="tabList"
                    bar-height="6"
                    bar-width="50"
                    active-color="#606DCE"
                    font-size="28"
                    inactive-color="#888888"
                    :is-scroll="false"
                    @change="change"
                ></u-tabs>
            </view>
            <!-- <image src="@/static/yCreate/screen.png" mode="widthFix" class="screen" @click="show_screen=true"></image> -->
        </view>
        <!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
        <view class="all">
            <view class="card" v-for="(item, index) in list" :key="index">
                <view class="u-flex-center u-row-left">
                    <image
                        :src="item.image"
                        mode="aspectFill"
                        class="head-img"
                    ></image>
                    <view class="cont">
                        <view class="name u-line-2">{{ item.title }}</view>
                        <view class="u-flex u-row-between u-m-t-30">
                            <view class="price"
                                ><text>￥</text>{{ item.price }}</view
                            >
                            <view class="number"
                                >库存：{{ item.stock }} 销量：{{
                                    item.sales
                                }}</view
                            >
                        </view>
                    </view>
                </view>
                <view
                    class="u-flex-center u-row-between u-p-t-30 u-m-t-30 u-border-top"
                >
                    <view
                        class="time"
                        style="color: #606dce"
                        v-if="item.status == 'normal'"
                        >已上架</view
                    >
                    <view
                        class="time"
                        style="color: #606dce"
                        v-if="item.status == 'hidden'"
                        >已下架</view
                    >
                    <!-- <view class="time" v-if="current==1">仓库中</view> -->
                    <!-- <view class="time" style="color: #FF0000;" v-if="current==2">已售罄</view> -->
                    <view class="u-flex-center" v-if="item.status == 'normal'">
                        <view class="button button1" @click="cancel(item.id)"
                            >下架</view
                        >
                        <view class="button" @click="edit(item.id)">编辑</view>
                    </view>
                    <view class="u-flex-center" v-if="item.status == 'hidden'">
                        <view class="button button1" @click="del(item.id)"
                            >删除</view
                        >
                        <view class="button button1" @click="edit(item.id)"
                            >编辑</view
                        >
                        <view class="button" @click="confirm(item.id)"
                            >上架</view
                        >
                    </view>
                </view>
            </view>
        </view>
        <!-- </mescroll-body> -->
        <u-popup v-model="show_screen" mode="top" border-radius="20">
            <view class="pop">
                <view class="u-p-30">
                    <u-search
                        placeholder="请输入产品标题"
                        v-model="keyword"
                        bg-color="#F6F6F6"
                        :show-action="false"
                        @search="search"
                    ></u-search>
                    <view class="u-flex-center u-row-between u-p-t-30">
                        <picker
                            :range="sjlist"
                            range-key="name"
                            @change="chosesj"
                        >
                            <view class="box-item u-flex-center">
                                <text>{{ sjname ? sjname : "上架状态" }}</text>
                                <image
                                    :src="BaseUrl + '/static/yCreate/bot.png'"
                                    mode="widthFix"
                                ></image>
                            </view>
                        </picker>
                        <picker
                            :range="shlist"
                            range-key="name"
                            @change="chosesh"
                        >
                            <view
                                class="box-item u-flex-center"
                                style="margin-left: 20rpx"
                            >
                                <text>{{ shname ? shname : "审核状态" }}</text>
                                <image
                                    :src="BaseUrl + '/static/yCreate/bot.png'"
                                    mode="widthFix"
                                ></image>
                            </view>
                        </picker>
                        <view class="" style="flex: 1"> </view>
                        <!-- <view class="box-item u-flex-center">
							<text>商品类目</text>
							<image src="@/static/yCreate/bot.png" mode="widthFix"></image>
						</view>
						<view class="box-item u-flex-center">
							<text>更新时间</text>
							<image src="@/static/yCreate/bot.png" mode="widthFix"></image>
						</view> -->
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">价格</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box u-flex-center"
                                v-for="(item, index) in priceList"
                                :class="{ 'select-box': priceIdx == index }"
                                @click="checkIdx(index, 1)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">创建时间</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box u-flex-center"
                                v-for="(item, index) in timeList"
                                :class="{ 'select-box': timeIdx == index }"
                                @click="checkIdx(index, 2)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="options-item">
                        <view class="title">销量</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box u-flex-center"
                                v-for="(item, index) in salesVolume"
                                :class="{
                                    'select-box': salesVolumeIdx == index,
                                }"
                                @click="checkIdx(index, 3)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex">
                    <view class="btn u-flex-center" @click="show_screen = false"
                        >取消</view
                    >
                    <view class="btn btn2 u-flex-center" @click="sxbtn"
                        >确定</view
                    >
                </view>
            </view>
        </u-popup>
        <u-select
            v-model="show"
            :list="picklist"
            confirm-color="#46c289"
            @confirm="confirm2"
        ></u-select>
        <u-tabbar
            v-model="currentTab"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabsList"
        ></u-tabbar>
        <view class="xzbtn">
            <view class="add btn u-flex-center" @click="goAdd()">新增产品</view>
        </view>
    </view>
</template>

<script>
// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { BaseUrl } from "../../utils/req";
export default {
    // mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            BaseUrl,
            tabList: [
                {
                    name: "已上架",
                },
                {
                    name: "仓库中",
                },
                // {
                //     name: "审核中",
                // },
                {
                    name: "待修改",
                },
            ],
            priceIdx: 0,
            timeIdx: 0,
            salesVolumeIdx: 0,
            priceList: ["50以下", "50-100", "100-300", "300-1000"],
            timeList: ["3天之内", "3-7天", "7-30天", "30天以上"],
            salesVolume: ["0-500", "500-1000", "1000以上"],
            show_screen: false,
            keyword: "",
            flowList: [],
            current: 0,
            type: "-1",
            show: false,
            list: [],
            tabsList: [
                {
                    iconPath: BaseUrl + "/static/wdcp-fl.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-dd.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-dd-active.png",
                //     text: "订单",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-sh.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-yf.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-yf-active.png",
                //     text: "运费",
                // },
                {
                    iconPath: BaseUrl + "/static/wdcp-wd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            currentTab: 0,
            page: 1,
            sjlist: [
                {
                    name: "上架",
                },
                {
                    name: "下架",
                },
            ],
            sjname: "",
            shlist: [
                {
                    id: 1,
                    name: "待审核",
                },
                {
                    id: 2,
                    name: "已审核",
                },
                {
                    id: 3,
                    name: "驳回",
                },
            ],
            shname: "",
            shid: "",
            picklist: [],
        };
    },
    mounted() {
        this.getList(1);
    },
    methods: {
        checkIdx(index, type) {
            if (type == 1) {
                this.priceIdx = index;
            } else if (type == 2) {
                this.timeIdx = index;
            } else {
                this.salesVolumeIdx = index;
            }
        },
        confirm2(e) {
            console.log(e);
        },
        confirm(id) {
            this.$u
                .post("scholar/order_complete", {
                    id: id,
                })
                .then((res) => {
                    this.$u.toast(res.msg);
                    if (res.code == 1) {
                        this.mescroll.resetUpScroll();
                    }
                });
        },
        upCallback(page) {
            this.mescroll.optUp.textNoMore = "-已经到底啦-";
            this.$u
                .post("scholar/order_list", {
                    page: page.num,
                    limit: page.size,
                    id: this.type,
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        change(index) {
            this.page = 1;
            this.current = index;
            this.getList();
        },
        changeTab(e) {
            if (e == 1) {
                uni.redirectTo({ url: "/wNew/pages/mine" });
            } else if (e == 2) {
                uni.redirectTo({ url: "/wNew/pages/freight" });
            } else if (e == 3) {
                uni.redirectTo({ url: "/wNew/pages/mine" });
            }
            // else if (e == 4) {
            // uni.redirectTo({ url: "/yCreate/pages/reviewOrder" });
            //     uni.redirectTo({ url: "/wNew/pages/mine" });
            // }
        },
        getList() {
            this.$u
                .post("/api/shop/shop_goods_list", {
                    page: this.page,
                    status: this.current,
                    audit: this.shid,
                    price: this.priceIdx,
                    sales: this.salesVolumeIdx,
                    time: this.timeIdx,
                    keyword: this.keyword,
                })
                .then((res) => {
                    if (res.code == 1) {
                        if (this.page == 1) {
                            this.list = res.data.data;
                        } else {
                            let list = this.list;
                            list = list.concat(res.data.data);
                            this.list = list;
                        }
                    } else {
                    }
                });
        },
        //下架
        cancel(id) {
            this.$u
                .post("/api/shop/xj_sj_goods", {
                    ids: id,
                    type: 1,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: "商品下架成功",
                            icon: "none",
                            duration: 3000,
                        });
                        this.getList();
                    }
                });
        },
        //上架
        confirm(id) {
            this.$u
                .post("/api/shop/xj_sj_goods", {
                    ids: id,
                    type: 2,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: "商品上架成功",
                            icon: "none",
                            duration: 3000,
                        });
                        this.getList();
                    }
                });
        },
        //删除
        del(id) {
            var that = this;
            uni.showModal({
                content: "是否确认删除",
                success(res) {
                    if (res.confirm) {
                        that.$u
                            .post("/api/shop/del", {
                                ids: id,
                            })
                            .then((res) => {
                                if (res.code == 1) {
                                    that.getList();
                                }
                            });
                    } else if (res.cancel) {
                    }
                },
            });
        },
        //编辑
        edit(id) {
            uni.navigateTo({
                url: `/upRelease/editGoods?id=${id}`,
            });
        },
        goAdd() {
            uni.navigateTo({
                url: "/wNew/pages/addProducts",
            });
        },
        chosesj(e) {
            this.sjname = this.sjlist[e.detail.value].name;
            this.current = e.detail.value;
        },
        chosesh(e) {
            this.shname = this.shlist[e.detail.value].name;
            this.shid = this.shlist[e.detail.value].id;
        },
        sxbtn() {
            this.getList();
            this.show_screen = false;
        },
    },
    onReachBottom() {
        this.page = Number(this.page) + 1;
        this.getList();
    },
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}

.tabs {
    position: sticky;
    top: 0;
    z-index: 98;
    background-color: #fff;
    padding: 0 20rpx;

    .screen {
        width: 40rpx;
        height: auto;
    }
}

.all {
    padding: 0 24rpx;

    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 30rpx 20rpx;
        background: #ffffff;
        border-radius: 10rpx;

        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }

        .cont {
            width: 100%;

            .name {
                margin-bottom: 22rpx;
                font-size: 28rpx;
            }

            .content {
                font-size: 24rpx;
                color: #888888;
            }

            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;

                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }

                text {
                    font-size: 32rpx;
                }
            }

            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;

                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }

            .number {
                font-size: 24rpx;
                color: #888888;
            }
        }
    }
}

.time {
    font-size: 24rpx;
    color: #888888;
}

.button {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140rpx;
    height: 52rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #ffffff;
}

.button1 {
    border: 1rpx solid #888888;
    background: #fff;
    color: #888888;
}

.pop {
    .box-item {
        width: 157rpx;
        height: 52rpx;
        background: #f6f6f6;
        border-radius: 40rpx;
        font-size: 24rpx;

        image {
            margin-left: 10rpx;
            width: 20rpx;
            height: auto;
        }
    }

    .options-item {
        padding: 30rpx 0 0 0;

        .title {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
        }

        .options-box {
            margin: 0 30rpx 30rpx 0;
            width: 180rpx;
            height: 52rpx;
            background: #f5f5f5;
            color: #888888;
            border-radius: 40rpx;
            font-size: 24rpx;
        }

        .select-box {
            background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
            color: #ffffff;
        }
    }

    .btn {
        width: 50%;
        height: 100rpx;
        background: #f6f6f6;
        font-size: 28rpx;
        font-weight: bold;
    }

    .btn2 {
        background: #606dce;
        color: #ffffff;
    }
}

.u-drawer {
    z-index: 999 !important;
}
.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.btn {
    width: 630rpx;
    height: 80rpx;
}
.xzbtn {
    // background: #fff;
    position: fixed;
    bottom: 200rpx;
    width: 100%;
}
</style>
